<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统监控仪表板</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#4080FF',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        info: '#86909C',
                        dark: '#1D2129',
                        light: '#F2F3F5',
                        cardBg: '#FFFFFF',
                        cardBorder: '#E5E7EB'
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
                transition: all 0.3s ease;
            }
            .card-shadow:hover {
                box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
                transform: translateY(-2px);
            }
            .gradient-bg {
                background: linear-gradient(135deg, #165DFF 0%, #4080FF 100%);
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .chart-container {
                position: relative;
                height: 100%;
                width: 100%;
            }
            .progress-bar {
                transition: width 0.5s ease;
            }
            .refresh-btn {
                transition: all 0.2s ease;
            }
            .refresh-btn:hover {
                transform: rotate(180deg);
            }
            .card-border {
                border: 1px solid rgba(229, 231, 235, 0.5);
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-inter text-dark min-h-screen">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center transition-all duration-300">
            <div class="flex items-center">
                <div class="w-8 h-8 rounded-lg gradient-bg flex items-center justify-center mr-2 shadow-md">
                    <i class="fa fa-line-chart text-white"></i>
                </div>
                <h1 class="text-xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">系统监控仪表板</h1>
            </div>
            <div class="flex items-center space-x-4">
                <div class="relative">
                    <span id="hostname" class="text-sm font-medium text-dark">加载中...</span>
                </div>
                <div class="relative">
                    <span id="current-time" class="text-sm text-info"></span>
                </div>
                <button id="refresh-all" class="w-8 h-8 rounded-full hover:bg-gray-100 flex items-center justify-center text-primary hover:text-secondary transition-all duration-300 refresh-btn">
                    <i class="fa fa-refresh"></i>
                </button>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="container mx-auto px-4 py-6">
        <!-- 系统概览 -->
        <section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
            <!-- CPU使用率 -->
            <div class="bg-white rounded-xl p-5 card-shadow card-border hover:border-primary/20 transition-all duration-300">
                <div class="flex items-center justify-between mb-3">
                    <h3 class="text-sm font-medium text-info">CPU使用率</h3>
                    <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center transition-all duration-300 hover:bg-primary/20">
                        <i class="fa fa-microchip text-primary"></i>
                    </div>
                </div>
                <div class="flex items-end justify-between">
                    <div>
                        <p id="cpu-usage" class="text-2xl font-bold transition-colors duration-300">0.0%</p>
                        <p id="cpu-cores" class="text-xs text-info mt-1">加载中...</p>
                    </div>
                    <div class="w-16 h-16">
                        <canvas id="cpu-gauge"></canvas>
                    </div>
                </div>
            </div>

            <!-- 内存使用率 -->
            <div class="bg-white rounded-xl p-5 card-shadow card-border hover:border-secondary/20 transition-all duration-300">
                <div class="flex items-center justify-between mb-3">
                    <h3 class="text-sm font-medium text-info">内存使用率</h3>
                    <div class="w-8 h-8 rounded-full bg-secondary/10 flex items-center justify-center transition-all duration-300 hover:bg-secondary/20">
                        <i class="fa fa-memory text-secondary"></i>
                    </div>
                </div>
                <div class="flex items-end justify-between">
                    <div>
                        <p id="memory-usage" class="text-2xl font-bold transition-colors duration-300">0.0%</p>
                        <p id="memory-details" class="text-xs text-info mt-1">加载中...</p>
                    </div>
                    <div class="w-16 h-16">
                        <canvas id="memory-gauge"></canvas>
                    </div>
                </div>
            </div>

            <!-- 系统负载 -->
            <div class="bg-white rounded-xl p-5 card-shadow card-border hover:border-success/20 transition-all duration-300">
                <div class="flex items-center justify-between mb-3">
                    <h3 class="text-sm font-medium text-info">系统负载</h3>
                    <div class="w-8 h-8 rounded-full bg-success/10 flex items-center justify-center transition-all duration-300 hover:bg-success/20">
                        <i class="fa fa-tachometer text-success"></i>
                    </div>
                </div>
                <div class="grid grid-cols-3 gap-2">
                    <div class="text-center">
                        <p id="system-load-1min" class="text-lg font-bold transition-colors duration-300">0.00</p>
                        <p class="text-xs text-info mt-1">1分钟</p>
                    </div>
                    <div class="text-center">
                        <p id="system-load-5min" class="text-lg font-bold transition-colors duration-300">0.00</p>
                        <p class="text-xs text-info mt-1">5分钟</p>
                    </div>
                    <div class="text-center">
                        <p id="system-load-15min" class="text-lg font-bold transition-colors duration-300">0.00</p>
                        <p class="text-xs text-info mt-1">15分钟</p>
                    </div>
                </div>
            </div>

            <!-- 在线时间 -->
            <div class="bg-white rounded-xl p-5 card-shadow card-border hover:border-info/20 transition-all duration-300">
                <div class="flex items-center justify-between mb-3">
                    <h3 class="text-sm font-medium text-info">系统运行时间</h3>
                    <div class="w-8 h-8 rounded-full bg-info/10 flex items-center justify-center transition-all duration-300 hover:bg-info/20">
                        <i class="fa fa-clock-o text-info"></i>
                    </div>
                </div>
                <div>
                    <p id="uptime" class="text-2xl font-bold transition-colors duration-300">00:00:00</p>
                    <p id="os-info" class="text-xs text-info mt-1">加载中...</p>
                </div>
            </div>
        </section>

        <!-- 统一大小的面板区域 -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <!-- CPU详情 -->
            <div class="bg-white rounded-xl p-6 card-shadow card-border h-[350px]">
                <div class="flex items-center justify-between mb-4">
                    <div class="flex items-center">
                        <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center mr-2">
                            <i class="fa fa-microchip text-primary"></i>
                        </div>
                        <h2 class="text-lg font-semibold">CPU详情</h2>
                    </div>
                    <div id="cpu-name" class="text-sm text-info truncate max-w-xs">加载中...</div>
                </div>
                <div class="h-[250px] chart-container">
                    <canvas id="cpu-chart"></canvas>
                </div>
            </div>

            <!-- 内存详情 -->
            <div class="bg-white rounded-xl p-6 card-shadow card-border h-[350px]">
                <div class="flex items-center justify-between mb-4">
                    <div class="flex items-center">
                        <div class="w-8 h-8 rounded-full bg-secondary/10 flex items-center justify-center mr-2">
                            <i class="fa fa-memory text-secondary"></i>
                        </div>
                        <h2 class="text-lg font-semibold">内存详情</h2>
                    </div>
                    <div class="text-sm text-info">实时监控</div>
                </div>
                <div class="h-[250px] chart-container">
                    <canvas id="memory-chart"></canvas>
                </div>
            </div>

            <!-- 网络流量 -->
            <div class="bg-white rounded-xl p-6 card-shadow card-border h-[350px]">
                <div class="flex items-center justify-between mb-4">
                    <div class="flex items-center">
                        <div class="w-8 h-8 rounded-full bg-success/10 flex items-center justify-center mr-2">
                            <i class="fa fa-wifi text-success"></i>
                        </div>
                        <h2 class="text-lg font-semibold">网络流量</h2>
                    </div>
                    <button id="refresh-network" class="text-primary text-sm flex items-center refresh-btn">
                        <i class="fa fa-refresh mr-1"></i> 刷新
                    </button>
                </div>
                <div class="h-[250px] chart-container">
                    <canvas id="network-chart"></canvas>
                </div>
            </div>

            <!-- 磁盘使用情况 -->
            <div class="bg-white rounded-xl p-6 card-shadow card-border h-[350px]">
                <div class="flex items-center justify-between mb-4">
                    <div class="flex items-center">
                        <div class="w-8 h-8 rounded-full bg-warning/10 flex items-center justify-center mr-2">
                            <i class="fa fa-database text-warning"></i>
                        </div>
                        <h2 class="text-lg font-semibold">磁盘使用情况</h2>
                    </div>
                    <button id="refresh-disks" class="text-primary text-sm flex items-center refresh-btn">
                        <i class="fa fa-refresh mr-1"></i> 刷新
                    </button>
                </div>
                <div id="disk-list" class="space-y-3 h-[250px] overflow-y-auto scrollbar-hide">
                    <!-- 磁盘信息将通过JavaScript动态加载 -->
                    <div class="text-center text-info py-6">
                        <i class="fa fa-spinner fa-spin mr-2"></i> 加载中...
                    </div>
                </div>
            </div>

            <!-- 文件系统 -->
            <div class="bg-white rounded-xl p-6 card-shadow card-border h-[350px]">
                <div class="flex items-center justify-between mb-4">
                    <div class="flex items-center">
                        <div class="w-8 h-8 rounded-full bg-info/10 flex items-center justify-center mr-2">
                            <i class="fa fa-folder text-info"></i>
                        </div>
                        <h2 class="text-lg font-semibold">文件系统</h2>
                    </div>
                    <button id="refresh-filesystems" class="text-primary text-sm flex items-center refresh-btn">
                        <i class="fa fa-refresh mr-1"></i> 刷新
                    </button>
                </div>
                <div id="filesystem-list" class="space-y-4 h-[250px] overflow-y-auto scrollbar-hide">
                    <!-- 文件系统信息将通过JavaScript动态加载 -->
                    <div class="text-center text-info py-6">
                        <i class="fa fa-spinner fa-spin mr-2"></i> 加载中...
                    </div>
                </div>
            </div>

            <!-- 进程列表 -->
            <div class="bg-white rounded-xl p-6 card-shadow card-border h-[350px]">
                <div class="flex items-center justify-between mb-4">
                    <div class="flex items-center">
                        <div class="w-8 h-8 rounded-full bg-danger/10 flex items-center justify-center mr-2">
                            <i class="fa fa-tasks text-danger"></i>
                        </div>
                        <h2 class="text-lg font-semibold">进程列表</h2>
                    </div>
                    <div class="flex items-center space-x-2">
                        <span class="text-sm text-info">按CPU使用率排序</span>
                        <button id="refresh-processes" class="text-primary text-sm flex items-center refresh-btn">
                            <i class="fa fa-refresh mr-1"></i> 刷新
                        </button>
                    </div>
                </div>
                <div class="h-[250px] overflow-x-auto overflow-y-auto scrollbar-hide">
                    <table class="min-w-full">
                        <thead>
                            <tr class="border-b border-gray-200">
                                <th class="py-2 px-3 text-left text-xs font-medium text-info uppercase tracking-wider whitespace-nowrap">PID</th>
                                <th class="py-2 px-3 text-left text-xs font-medium text-info uppercase tracking-wider whitespace-nowrap">进程名</th>
                                <th class="py-2 px-3 text-left text-xs font-medium text-info uppercase tracking-wider whitespace-nowrap">CPU</th>
                                <th class="py-2 px-3 text-left text-xs font-medium text-info uppercase tracking-wider whitespace-nowrap">内存</th>
                                <th class="py-2 px-3 text-left text-xs font-medium text-info uppercase tracking-wider whitespace-nowrap">用户</th>
                            </tr>
                        </thead>
                        <tbody id="process-list">
                            <!-- 进程列表将通过JavaScript动态加载 -->
                            <tr>
                                <td colspan="5" class="py-4 text-center text-info">
                                    <i class="fa fa-spinner fa-spin mr-2"></i> 加载中...
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </main>

    <script>
        // 更新当前时间
        function updateCurrentTime() {
            const now = new Date();
            const timeString = now.toLocaleString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit',
                hour12: false
            });
            document.getElementById('current-time').textContent = timeString;
        }

        // 初始化仪表盘图表
        function initGauge(canvasId, value, color) {
            const ctx = document.getElementById(canvasId).getContext('2d');
            return new Chart(ctx, {
                type: 'doughnut',
                data: {
                    datasets: [{
                        data: [value, 100 - value],
                        backgroundColor: [color, '#F2F3F5'],
                        borderWidth: 0,
                        cutout: '80%',
                        hoverOffset: 4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: true,
                    plugins: {
                        legend: { display: false },
                        tooltip: { enabled: false }
                    },
                    animation: {
                        animateRotate: true,
                        duration: 1000,
                        easing: 'easeOutCubic'
                    }
                }
            });
        }

        // 初始化图表
        let cpuGauge, memoryGauge, cpuChart, memoryChart, networkChart;
        let cpuHistory = Array(30).fill(0);
        let memoryHistory = Array(30).fill(0);
        let networkHistory = Array(30).fill(0);
        let networkSentHistory = Array(30).fill(0);
        let uptimeSeconds = 0;

        function initCharts() {
            // 初始化CPU仪表盘
            const initialCpu = parseFloat(document.getElementById('cpu-usage').textContent);
            cpuGauge = initGauge('cpu-gauge', initialCpu, '#165DFF');

            // 初始化内存仪表盘
            const initialMemory = parseFloat(document.getElementById('memory-usage').textContent);
            memoryGauge = initGauge('memory-gauge', initialMemory, '#4080FF');

            // 初始化CPU使用率图表
            const cpuCtx = document.getElementById('cpu-chart').getContext('2d');
            cpuChart = new Chart(cpuCtx, {
                type: 'line',
                data: {
                    labels: Array(30).fill(''),
                    datasets: [
                        {
                            label: '用户使用率',
                            data: cpuHistory,
                            borderColor: '#165DFF',
                            backgroundColor: 'rgba(22, 93, 255, 0.1)',
                            fill: true,
                            tension: 0.4
                        },
                        {
                            label: '系统使用率',
                            data: cpuHistory,
                            borderColor: '#FF7D00',
                            backgroundColor: 'rgba(255, 125, 0, 0.1)',
                            fill: true,
                            tension: 0.4
                        },
                        {
                            label: 'IO等待',
                            data: cpuHistory,
                            borderColor: '#F53F3F',
                            backgroundColor: 'rgba(245, 63, 63, 0.1)',
                            fill: true,
                            tension: 0.4
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    interaction: {
                        mode: 'index',
                        intersect: false,
                    },
                    plugins: {
                        legend: { 
                            position: 'top',
                            labels: {
                                boxWidth: 10,
                                padding: 15,
                                usePointStyle: true,
                                pointStyle: 'circle'
                            }
                        },
                        tooltip: { 
                            mode: 'index', 
                            intersect: false,
                            backgroundColor: 'rgba(0, 0, 0, 0.8)',
                            padding: 12,
                            cornerRadius: 6
                        }
                    },
                    scales: {
                        x: {
                            grid: {
                                display: false
                            }
                        },
                        y: {
                            beginAtZero: true,
                            max: 100,
                            ticks: { 
                                callback: (v) => v + '%',
                                padding: 10
                            },
                            grid: {
                                borderDash: [2, 4],
                                color: 'rgba(0, 0, 0, 0.05)'
                            }
                        }
                    },
                    animation: {
                        duration: 500
                    }
                }
            });

            // 初始化内存使用图表
            const memCtx = document.getElementById('memory-chart').getContext('2d');
            memoryChart = new Chart(memCtx, {
                type: 'bar',
                data: {
                    labels: ['已用内存', '可用内存'],
                    datasets: [{
                        label: '内存使用 (GB)',
                        data: [0, 0],
                        backgroundColor: ['#4080FF', '#00B42A'],
                        borderRadius: 6,
                        borderSkipped: false
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            backgroundColor: 'rgba(0, 0, 0, 0.8)',
                            padding: 12,
                            cornerRadius: 6,
                            callbacks: {
                                label: function(context) {
                                    return context.dataset.label + ': ' + context.parsed.y.toFixed(2) + ' GB';
                                }
                            }
                        }
                    },
                    scales: {
                        x: {
                            grid: {
                                display: false
                            },
                            ticks: {
                                padding: 10
                            }
                        },
                        y: {
                            beginAtZero: true,
                            grid: {
                                borderDash: [2, 4],
                                color: 'rgba(0, 0, 0, 0.05)'
                            },
                            ticks: {
                                padding: 10
                            }
                        }
                    },
                    animation: {
                        duration: 700,
                        easing: 'easeOutQuart'
                    }
                }
            });

            // 初始化网络流量图表
            const netCtx = document.getElementById('network-chart').getContext('2d');
            networkChart = new Chart(netCtx, {
                type: 'line',
                data: {
                    labels: Array(30).fill(''),
                    datasets: [
                        {
                            label: '接收 (KB/s)',
                            data: networkHistory,
                            borderColor: '#00B42A',
                            backgroundColor: 'rgba(0, 180, 42, 0.1)',
                            fill: true,
                            tension: 0.4,
                            borderWidth: 2
                        },
                        {
                            label: '发送 (KB/s)',
                            data: networkSentHistory,
                            borderColor: '#FF7D00',
                            backgroundColor: 'rgba(255, 125, 0, 0.1)',
                            fill: true,
                            tension: 0.4,
                            borderWidth: 2
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    interaction: {
                        mode: 'index',
                        intersect: false,
                    },
                    plugins: {
                        legend: { 
                            position: 'top',
                            labels: {
                                boxWidth: 10,
                                padding: 15,
                                usePointStyle: true,
                                pointStyle: 'circle'
                            }
                        },
                        tooltip: { 
                            mode: 'index', 
                            intersect: false,
                            backgroundColor: 'rgba(0, 0, 0, 0.8)',
                            padding: 12,
                            cornerRadius: 6
                        }
                    },
                    scales: {
                        x: {
                            grid: {
                                display: false
                            }
                        },
                        y: {
                            beginAtZero: true,
                            grid: {
                                borderDash: [2, 4],
                                color: 'rgba(0, 0, 0, 0.05)'
                            },
                            ticks: {
                                padding: 10
                            }
                        }
                    },
                    animation: {
                        duration: 500
                    }
                }
            });
        }

        // 格式化字节数
        function formatBytes(bytes, decimals = 2) {
            if (bytes === 0) return '0 Bytes';
            const k = 1024;
            const dm = decimals < 0 ? 0 : decimals;
            const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
        }

        // 更新CPU信息
        function updateCpuInfo() {
            fetch('/api/cpu')
                .then(response => response.json())
                .then(data => {
                    const cpuUsage = data.load.total;
                    document.getElementById('cpu-usage').textContent = cpuUsage.toFixed(1) + '%';
                    
                    // 更新仪表盘
                    cpuGauge.data.datasets[0].data = [cpuUsage, 100 - cpuUsage];
                    cpuGauge.update();
                    
                    // 更新历史图表
                    cpuHistory.push(data.load.user);
                    cpuHistory.shift();
                    
                    cpuChart.data.datasets[0].data = cpuHistory;
                    cpuChart.data.datasets[1].data = cpuHistory.map((_, i) => data.load.system);
                    cpuChart.data.datasets[2].data = cpuHistory.map((_, i) => data.load.ioWait);
                    cpuChart.update();
                });
        }

        // 更新内存信息
        function updateMemoryInfo() {
            fetch('/api/memory')
                .then(response => response.json())
                .then(data => {
                    const memoryUsage = data.usagePercent;
                    document.getElementById('memory-usage').textContent = memoryUsage.toFixed(1) + '%';
                    
                    // 更新仪表盘
                    memoryGauge.data.datasets[0].data = [memoryUsage, 100 - memoryUsage];
                    memoryGauge.update();
                    
                    // 更新图表
                    memoryChart.data.datasets[0].data = [
                        data.used / (1024 * 1024 * 1024),
                        data.available / (1024 * 1024 * 1024)
                    ];
                    memoryChart.update();
                });
        }

        // 加载磁盘信息
        function loadDiskInfo() {
            fetch('/api/disks')
                .then(response => response.json())
                .then(data => {
                    const diskList = document.getElementById('disk-list');
                    diskList.innerHTML = '';
                    
                    data.forEach(disk => {
                        const diskItem = document.createElement('div');
                        diskItem.className = 'border-b border-gray-100 pb-3';
                        diskItem.innerHTML = `
                            <div class="flex justify-between items-center mb-1">
                                <span class="font-medium text-sm">${disk.model || disk.name}</span>
                                <span class="text-xs text-info">${formatBytes(disk.size)}</span>
                            </div>
                            <div class="flex items-center text-xs text-info space-x-4">
                                <span>读取: ${formatBytes(disk.readBytes)}</span>
                                <span>写入: ${formatBytes(disk.writeBytes)}</span>
                            </div>
                        `;
                        diskList.appendChild(diskItem);
                    });
                });
        }

        // 加载文件系统信息
        function loadFileSystemInfo() {
            fetch('/api/filesystems')
                .then(response => response.json())
                .then(data => {
                    const fsList = document.getElementById('filesystem-list');
                    fsList.innerHTML = '';
                    
                    data.forEach(fs => {
                        const fsItem = document.createElement('div');
                        const usagePercent = fs.usagePercent;
                        let barColor = 'bg-success';
                        if (usagePercent > 80) barColor = 'bg-danger';
                        else if (usagePercent > 60) barColor = 'bg-warning';
                        
                        fsItem.innerHTML = `
                            <div class="flex justify-between items-center mb-1">
                                <span class="font-medium text-sm">${fs.mountPoint || fs.name}</span>
                                <span class="text-xs font-medium">${usagePercent.toFixed(1)} + '%'</span>
                            </div>
                            <div class="w-full bg-gray-100 rounded-full h-2 mb-1">
                                <div class="${barColor} h-2 rounded-full" style="width: ${usagePercent} + '%'"></div>
                            </div>
                            <div class="flex justify-between text-xs text-info">
                                <span>${formatBytes(fs.usedSpace)}</span>
                                <span>总计: ${formatBytes(fs.totalSpace)}</span>
                            </div>
                        `;
                        fsList.appendChild(fsItem);
                    });
                });
        }

        // 加载进程列表
        function loadProcessInfo() {
            fetch('/api/processes')
                .then(response => response.json())
                .then(data => {
                    const processList = document.getElementById('process-list');
                    processList.innerHTML = '';
                    
                    data.forEach(process => {
                        const row = document.createElement('tr');
                        row.className = 'border-b border-gray-100 hover:bg-gray-50';
                        row.innerHTML = `
                            <td class="py-2 px-3 text-sm">${process.pid}</td>
                            <td class="py-2 px-3 text-sm font-medium truncate" style="max-width: 200px; min-width: 200px;">${process.name}</td>
                            <td class="py-2 px-3">
                                <div class="flex items-center">
                                    <div class="w-16 bg-gray-100 rounded-full h-1.5 mr-2">
                                        <div class="bg-primary h-1.5 rounded-full" style="width: ${Math.min(process.cpuPercent, 100)} + '%'"></div>
                                    </div>
                                    <span class="text-xs">${process.cpuPercent.toFixed(1)} + '%'</span>
                                </div>
                            </td>
                            <td class="py-2 px-3">
                                <div class="flex items-center">
                                    <div class="w-16 bg-gray-100 rounded-full h-1.5 mr-2">
                                        <div class="bg-secondary h-1.5 rounded-full" style="width: ${Math.min(process.memoryPercent, 100)} + '%'"></div>
                                    </div>
                                    <span class="text-xs">${process.memoryPercent.toFixed(1)} + '%'</span>
                                </div>
                            </td>
                            <td class="py-2 px-3 text-sm">${process.user}</td>
                        `;
                        processList.appendChild(row);
                    });
                });
        }

        // 更新网络信息
        function updateNetworkInfo() {
            fetch('/api/networks')
                .then(response => response.json())
                .then(data => {
                    let totalRecv = 0, totalSent = 0;
                    data.forEach(net => {
                        totalRecv += net.bytesRecv || 0;
                        totalSent += net.bytesSent || 0;
                    });
                    
                    // 简单估算网速（KB/s）
                    networkHistory.push(totalRecv / 1024);
                    networkSentHistory.push(totalSent / 1024);
                    
                    if (networkHistory.length > 30) {
                        networkHistory.shift();
                        networkSentHistory.shift();
                    }
                    
                    networkChart.data.datasets[0].data = networkHistory;
                    networkChart.data.datasets[1].data = networkSentHistory;
                    networkChart.update();
                });
        }

        // 更新系统负载信息（使用jQuery Ajax）
        function updateLoadInfo() {
            $.ajax({
                url: '/api/load',
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    // 更新系统负载显示
                    $('#system-load-1min').text(data.loadAverage1min.toFixed(2));
                    $('#system-load-5min').text(data.loadAverage5min.toFixed(2));
                    $('#system-load-15min').text(data.loadAverage15min.toFixed(2));
                    
                    // 根据负载设置动态颜色函数
                    function setLoadColor(elementId, loadValue, processorCount) {
                        const loadRatio = loadValue / processorCount;
                        let textColor = 'text-info';
                        if (loadRatio > 1.0) textColor = 'text-danger';
                        else if (loadRatio > 0.7) textColor = 'text-warning';
                        else if (loadRatio > 0.5) textColor = 'text-success';
                        $(elementId).removeClass('text-info text-success text-warning text-danger').addClass(textColor);
                    }
                    
                    // 为每个负载值设置颜色
                    setLoadColor('#system-load-1min', data.loadAverage1min, data.processors);
                    setLoadColor('#system-load-5min', data.loadAverage5min, data.processors);
                    setLoadColor('#system-load-15min', data.loadAverage15min, data.processors);
                }
            });
        }
        
        // 更新系统运行时间（使用jQuery Ajax）
        function updateSystemUptime() {
            $.ajax({
                url: '/api/uptime',
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    $('#uptime').text(data.formatted);
                }
            });
        }

        // 更新CPU信息（使用jQuery Ajax）
        function updateCpuInfo() {
            $.ajax({
                url: '/api/cpu',
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    const cpuUsage = data.load.total;
                    $('#cpu-usage').text(cpuUsage.toFixed(1) + '%');
                    $('#cpu-cores').text(data.physicalCores + '核物理 / ' + data.logicalCores + '核逻辑');
                    $('#cpu-name').text(data.name);
                    
                    // 根据使用率设置颜色
                    let color = '#165DFF';
                    if (cpuUsage > 80) color = '#F53F3F';
                    else if (cpuUsage > 60) color = '#FF7D00';
                    else if (cpuUsage > 40) color = '#00B42A';
                    
                    // 更新仪表盘颜色
                    cpuGauge.data.datasets[0].data = [cpuUsage, 100 - cpuUsage];
                    cpuGauge.data.datasets[0].backgroundColor = [color, '#F2F3F5'];
                    cpuGauge.update();
                    
                    // 动态颜色变化效果
                    $('#cpu-usage').css('color', color).addClass('transition-colors duration-500');
                    
                    // 更新历史图表
                    cpuHistory.push(cpuUsage);
                    if (cpuHistory.length > 30) cpuHistory.shift();
                    
                    cpuChart.data.datasets[0].data = cpuHistory;
                    cpuChart.update();
                }
            });
        }

        // 更新内存信息（使用jQuery Ajax）
        function updateMemoryInfo() {
            $.ajax({
                url: '/api/memory',
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    const memoryUsage = data.usagePercent;
                    $('#memory-usage').text(memoryUsage.toFixed(1) + '%');
                    $('#memory-details').text(formatBytes(data.used) + ' / ' + formatBytes(data.total));
                    
                    // 根据使用率设置颜色
                    let color = '#4080FF';
                    if (memoryUsage > 80) color = '#F53F3F';
                    else if (memoryUsage > 60) color = '#FF7D00';
                    else if (memoryUsage > 40) color = '#00B42A';
                    
                    // 更新仪表盘颜色
                    memoryGauge.data.datasets[0].data = [memoryUsage, 100 - memoryUsage];
                    memoryGauge.data.datasets[0].backgroundColor = [color, '#F2F3F5'];
                    memoryGauge.update();
                    
                    // 动态颜色变化效果
                    $('#memory-usage').css('color', color).addClass('transition-colors duration-500');
                    
                    // 更新内存图表
                    memoryChart.data.datasets[0].data = [data.used / 1024 / 1024 / 1024, data.available / 1024 / 1024 / 1024];
                    memoryChart.update();
                }
            });
        }

        // 加载磁盘信息（使用jQuery Ajax）
        function loadDiskInfo() {
            $('#disk-list').html('<div class="text-center text-info py-6 flex flex-col items-center justify-center"><i class="fa fa-spinner fa-spin mb-2"></i> 加载中...</div>');
            
            $.ajax({
                url: '/api/disks',
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    const diskList = $('#disk-list');
                    diskList.empty();
                    
                    $.each(data, function(index, disk) {
                        const diskItem = $('<div>').addClass('p-3 border border-gray-100 rounded-lg bg-white hover:shadow-md transition-all duration-300 mb-2').html(`
                            <div class="flex justify-between items-center mb-2">
                                <div class="flex items-center">
                                    <i class="fa fa-hdd-o text-info mr-2"></i>
                                    <span class="font-medium">${disk.name}</span>
                                </div>
                                <span class="text-xs font-medium px-2 py-1 bg-gray-100 rounded-full">${formatBytes(disk.size)}</span>
                            </div>
                            <div class="grid grid-cols-2 gap-2 text-xs">
                                <div class="bg-gray-50 p-2 rounded">
                                    <span class="text-gray-500 block mb-1">型号</span>
                                    <span class="font-medium truncate">${disk.model}</span>
                                </div>
                                <div class="bg-gray-50 p-2 rounded">
                                    <span class="text-gray-500 block mb-1">类型</span>
                                    <span class="font-medium">${disk.type}</span>
                                </div>
                            </div>
                        `);
                        diskList.append(diskItem);
                    });
                },
                error: function() {
                    $('#disk-list').html('<div class="text-center text-danger py-6 flex flex-col items-center justify-center"><i class="fa fa-exclamation-circle mb-2"></i> 加载磁盘信息失败</div>');
                }
            });
        }

        // 加载文件系统信息（使用jQuery Ajax）
        function loadFileSystemInfo() {
            $('#filesystem-list').html('<div class="text-center text-info py-6 flex flex-col items-center justify-center"><i class="fa fa-spinner fa-spin mb-2"></i> 加载中...</div>');
            
            $.ajax({
                url: '/api/filesystems',
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    const filesystemList = $('#filesystem-list');
                    filesystemList.empty();
                    
                    $.each(data, function(index, fs) {
                        const usagePercent = fs.usagePercent;
                        // 根据使用率设置颜色
                        let barColor = 'bg-success';
                        let textColor = 'text-success';
                        if (usagePercent > 90) { 
                            barColor = 'bg-danger';
                            textColor = 'text-danger';
                        } else if (usagePercent > 70) { 
                            barColor = 'bg-warning';
                            textColor = 'text-warning';
                        } else if (usagePercent > 50) { 
                            barColor = 'bg-primary';
                            textColor = 'text-primary';
                        }
                        
                        const fsItem = $('<div>').addClass('p-3 border border-gray-100 rounded-lg bg-white hover:shadow-sm transition-all duration-300 mb-2').html(`
                            <div class="flex justify-between items-center mb-1">
                                <div class="flex items-center">
                                    <i class="fa fa-folder-o text-info mr-2"></i>
                                    <span class="font-medium text-sm truncate max-w-[180px]">${fs.mountPoint || fs.name}</span>
                                </div>
                                <span class="text-xs font-medium ${textColor}">${usagePercent.toFixed(1)}%</span>
                            </div>
                            <div class="w-full bg-gray-100 rounded-full h-2.5 mb-1">
                                <div class="progress-bar ${barColor} h-2.5 rounded-full" style="width: 0%"></div>
                            </div>
                            <div class="flex justify-between text-xs text-info">
                                <span>已用: ${formatBytes(fs.usedSpace)}</span>
                                <span>总计: ${formatBytes(fs.totalSpace)}</span>
                            </div>
                        `);
                        filesystemList.append(fsItem);
                        
                        // 进度条动画效果
                        setTimeout(() => {
                            fsItem.find('.progress-bar').css('width', usagePercent + '%');
                        }, 50);
                    });
                },
                error: function() {
                    $('#filesystem-list').html('<div class="text-center text-danger py-6 flex flex-col items-center justify-center"><i class="fa fa-exclamation-circle mb-2"></i> 加载文件系统信息失败</div>');
                }
            });
        }

        // 加载进程信息（使用jQuery Ajax）
        function loadProcessInfo() {
            $('#process-list').html('<tr><td colspan="5" class="py-4 text-center text-info"><i class="fa fa-spinner fa-spin mr-2"></i> 加载中...</td></tr>');
            
            $.ajax({
                url: '/api/processes',
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    const processList = $('#process-list');
                    processList.empty();
                    
                    $.each(data, function(index, process) {
                        // 设置CPU使用率颜色
                        let cpuColor = 'bg-info';
                        if (process.cpuPercent > 70) cpuColor = 'bg-danger';
                        else if (process.cpuPercent > 30) cpuColor = 'bg-warning';
                        
                        // 设置内存使用率颜色
                        let memoryColor = 'bg-info';
                        if (process.memoryPercent > 70) memoryColor = 'bg-danger';
                        else if (process.memoryPercent > 30) memoryColor = 'bg-warning';
                        
                        const tr = $('<tr>').addClass('border-b border-gray-100 hover:bg-gray-50 transition-colors duration-200').html(`
                            <td class="py-2 px-3 text-sm whitespace-nowrap">${process.pid}</td>
                            <td class="py-2 px-3 text-sm font-medium truncate" style="max-width: 100px; min-width: 100px;">${process.name}</td>
                            <td class="py-2 px-3" style="max-width: 100px; min-width: 100px;">
                                <div class="flex items-center">
                                    <div class="w-20 bg-gray-100 rounded-full h-2 mr-2 overflow-hidden">
                                        <div class="progress-bar ${cpuColor} h-full rounded-full" style="width: 0%"></div>
                                    </div>
                                    <span class="text-xs">${process.cpuPercent.toFixed(1)}%</span>
                                </div>
                            </td>
                            <td class="py-2 px-3" style="max-width: 100px; min-width: 100px;">
                                <div class="flex items-center">
                                    <div class="w-20 bg-gray-100 rounded-full h-2 mr-2 overflow-hidden">
                                        <div class="progress-bar ${memoryColor} h-full rounded-full" style="width: 0%"></div>
                                    </div>
                                    <span class="text-xs">${process.memoryPercent.toFixed(1)}%</span>
                                </div>
                            </td>
                            <td class="py-2 px-3 text-sm whitespace-nowrap" style="max-width: 100px; min-width: 100px;">${process.user}</td>
                        `);
                        processList.append(tr);
                        
                        // 进度条动画效果
                        setTimeout(() => {
                            tr.find('.progress-bar:eq(0)').css('width', Math.min(process.cpuPercent, 100) + '%');
                            tr.find('.progress-bar:eq(1)').css('width', Math.min(process.memoryPercent, 100) + '%');
                        }, 50 * (index % 10));
                    });
                },
                error: function() {
                    $('#process-list').html('<tr><td colspan="5" class="py-4 text-center text-danger"><i class="fa fa-exclamation-circle mr-2"></i> 加载进程信息失败</td></tr>');
                }
            });
        }

        // 加载网络信息并更新图表（使用jQuery Ajax）
        function updateNetworkInfo() {
            $.ajax({
                url: '/api/networks',
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    // 计算总网络流量
                    let totalRecv = 0;
                    let totalSent = 0;
                    $.each(data, function(index, network) {
                        totalRecv += network.bytesRecv;
                        totalSent += network.bytesSent;
                    });
                    
                    // 更新历史数据
                    networkHistory.push(totalRecv / 1024); // 转换为KB
                    networkSentHistory.push(totalSent / 1024);
                    
                    if (networkHistory.length > 30) {
                        networkHistory.shift();
                        networkSentHistory.shift();
                    }
                    
                    networkChart.data.datasets[0].data = networkHistory;
                    networkChart.data.datasets[1].data = networkSentHistory;
                    networkChart.update();
                }
            });
        }

        // 加载主机信息（使用jQuery Ajax）
        function loadHostInfo() {
            $.ajax({
                url: '/api/host',
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    $('#hostname').text(data.hostname);
                    $('#os-info').text(data.osName + ' ' + data.osVersion);
                }
            });
        }

        // 更新当前时间（使用jQuery）
        function updateCurrentTime() {
            const now = new Date();
            const timeString = now.toLocaleString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit',
                hour12: false
            });
            $('#current-time').text(timeString);
        }

        // jQuery初始化
        $(document).ready(function() {
            // 页面加载效果
            $('body').addClass('opacity-0 transition-opacity duration-500');
            setTimeout(() => {
                $('body').removeClass('opacity-0');
            }, 300);
            
            updateCurrentTime();
            setInterval(updateCurrentTime, 1000);
            
            initCharts();
            
            // 初始加载数据
            loadHostInfo();
            updateCpuInfo();
            updateMemoryInfo();
            loadDiskInfo();
            loadFileSystemInfo();
            loadProcessInfo();
            updateLoadInfo(); // 初始加载系统负载
            updateSystemUptime(); // 初始加载系统运行时间
            
            // 设置定时更新
            setInterval(updateCpuInfo, 2000);
            setInterval(updateMemoryInfo, 3000);
            setInterval(updateNetworkInfo, 3000);
            setInterval(updateLoadInfo, 5000); // 系统负载5秒更新一次
            setInterval(updateSystemUptime, 1000); // 系统运行时间每分钟更新一次
            
            // 设置刷新按钮事件（使用jQuery事件绑定）
            $('#refresh-disks, #refresh-filesystems, #refresh-processes, #refresh-network').on('click', function() {
                const icon = $(this).find('i.fa-refresh');
                icon.addClass('animate-spin');
                setTimeout(() => icon.removeClass('animate-spin'), 500);
            });
            
            $('#refresh-disks').on('click', loadDiskInfo);
            $('#refresh-filesystems').on('click', loadFileSystemInfo);
            $('#refresh-processes').on('click', loadProcessInfo);
            $('#refresh-network').on('click', updateNetworkInfo);
            
            // 添加全部刷新功能
            $('#refresh-all').on('click', function() {
                $(this).addClass('animate-spin');
                setTimeout(() => $(this).removeClass('animate-spin'), 500);
                
                // 刷新所有数据
                loadHostInfo();
                updateCpuInfo();
                updateMemoryInfo();
                loadDiskInfo();
                loadFileSystemInfo();
                loadProcessInfo();
                updateNetworkInfo();
                updateLoadInfo(); // 刷新系统负载
                updateSystemUptime(); // 刷新系统运行时间
            });
        });
    </script>
</body>
</html>